{% extends "autotester/base.html" %}
{% block title %}API编辑{% endblock %}
{% block content %}
    <div class="row">
        <ol class="breadcrumb">
            <li><a href="/autotester/projects">全部项目</a></li>
            <li><a href="/autotester/project/{{ api.module.project.id }}">{{ api.module.project.name }}</a></li>
            <li><a href="/autotester/apis/{{ api.module.id }}">{{ api.module.name }}模块</a></li>
            <li class="active">{{ api.name }}(编辑)</li>
        </ol>
    </div>

    <div class="row">
        <div class="col-sm-8 col-sm-offset-2">
            <div class="ibox" style="min-width: 900px">
                <div class="ibox-content">
                    <form class="form-horizontal" method="POST"
                          action="/autotester/api/update/{{ api.id }}">
                        {% csrf_token %}

                        <div class="form-group">
                            <label for="name" class="col-sm-2 control-label">名称</label>
                            <div class="col-sm-3">
                                <input type="text" name="name" class="form-control" id="name" value="{{ api.name }}"
                                       placeholder="查询/创建/更新/删除 XXX">
                            </div>
                            <label for="name" class="col-sm-1 control-label">描述</label>
                            <div class="col-sm-5">
                                <input  type="text" name="desc" class="form-control" id="desc" value="{{ api.desc }}">
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="url" class="col-sm-2 control-label">URL</label>
                            <div class="col-sm-9">

                                <input type="text" name="url" class="form-control" id="url" value="{{ api.url }}"
                                       placeholder="URL(例如：'/blog/query?n=1&s=10')">
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="method" class="col-sm-2 control-label">请求方法</label>
                            <div class="col-sm-10">
                                {% ifequal api.method "GET" %}
                                    <label><input type="radio" name="method" value="GET" id="method" checked>GET</label>
                                {% else %}
                                    <label><input type="radio" name="method" value="GET" id="method">GET</label>
                                {% endifequal %}
                                {% ifequal api.method "POST" %}
                                    <label><input type="radio" name="method" value="POST" checked>POST</label>
                                {% else %}
                                    <label><input type="radio" name="method" value="POST">POST</label>
                                {% endifequal %}
                                {% ifequal api.method "PUT" %}
                                    <label><input type="radio" name="method" value="PUT" checked>PUT</label>
                                {% else %}
                                    <label><input type="radio" name="method" value="PUT">PUT</label>
                                {% endifequal %}
                                {% ifequal api.method "DELETE" %}
                                    <label><input type="radio" name="method" value="DELETE" checked>DELETE</label>
                                {% else %}
                                    <label><input type="radio" name="method" value="DELETE">DELETE</label>
                                {% endifequal %}
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="headers" class="col-sm-2 control-label">HEADERS</label>
                            <div class="col-sm-10">
                        <textarea class="form-control" name="headers" id="headers" rows="3"
                                  placeholder='{"Content-Type":"application/json"}'>{{ api.headers }}</textarea>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label">请求参数</label>
                            <!-- 参数	必选	类型	说明 -->
                            <div class="col-sm-8">
                                <table class="table table-form" id="parm">
                                    <thead>
                                    <tr>
                                        <th data-field="name">参数名</th>
                                        <th style="min-width: 75px;">必选</th>
                                        <th>类型</th>
                                        <th>说明</th>
                                        <th style="min-width: 50px;">操作</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    {% for foo in api_parm %}
                                        <tr id="row{{ foo.id }}" class="parm">


                                            <td>
                                                <input type="text" name="parm_name" class="form-control" id="name"
                                                       value="{{ foo.name }}">
                                            </td>
                                            <td>
                                                <input type="text" name="parm_must_option" class="form-control"
                                                       style="max-width: 60px;"
                                                       id="must_option"
                                                       value="{{ foo.must_option }}">
                                            </td>
                                            <td>
                                                <input type="text" name="data_type" class="form-control"
                                                       style="max-width: 100px;" id="data_type"
                                                       value="{{ foo.data_type }}">
                                            </td>
                                            <td>
                                                <input type="text" name="desc" class="form-control" id="desc"
                                                       value="{{ foo.desc }}">
                                            </td>
                                            <td>
                                                <a onclick="postInsert(event)" id="parm_add"><i
                                                        class="glyphicon glyphicon-plus"></i></a>
                                                <a onclick="deleteRow(event)" id="remove"><i
                                                        class="glyphicon glyphicon-remove"></i></a>
                                            </td>
                                        </tr>
                                    {% endfor %}
                                    <tr class="parm">

                                        <td><input type="text" name="parm_name" class="form-control" id="name"></td>
                                        <td><input type="text" name="must_option" class="form-control"
                                                   style="max-width: 60px;" id="must_option"></td>
                                        <td><input type="text" name="data_type" class="form-control"
                                                   style="max-width: 100px;" id="data_type"></td>
                                        <td><input type="text" name="desc" class="form-control" id="desc"></td>
                                        <td>
                                            <a onclick="postInsert(event)" id="parm_add"><i
                                                    class="glyphicon glyphicon-plus"></i></a>
                                            <a onclick="deleteRow(event)" id="remove"><i
                                                    class="glyphicon glyphicon-remove"></i></a>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="headers" class="col-sm-2 control-label">返回类型</label>
                            <div class="col-sm-2">
                                <div class="input-group">
                                    <input type="text" class="form-control" id="resp_type" autocomplete="off">
                                    <div class="input-group-btn">
                                        <button type="button" class="btn btn-white dropdown-toggle" data-toggle="">
                                            <span class="caret"></span>
                                        </button>
                                        <ul class="dropdown-menu dropdown-menu-right" role="menu"
                                            style="padding-top: 0px; max-height: 375px; max-width: 800px; overflow: auto; width: auto; transition: 0.3s;"></ul>
                                    </div>
                                    <!-- /btn-group -->
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="headers" class="col-sm-2 control-label">返回内容(案例)</label>
                            <div class="col-sm-10">
                        <textarea class="form-control" name="exp" id="exp" rows="10">{{ api.exp }}</textarea>
                            </div>

                        </div>
                        <div class="form-group">
                            <div class="col-sm-offset-2 col-sm-10">
                                <button type="submit" class="btn btn-primary">保存</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>



    <script type="text/javascript">
        var newRowID = 0;

        function createRow() {
            var newRow = "<tr class='parm'>";
            newRow += "<td><input type='text' name='name' class='form-control' id='name'></td>";
            newRow += "<td><input type='text' name='must_option' class='form-control' style='max-width: 60px;' id='must_option'></td>";
            newRow += "<td><input type='text' name='data_type' class='form-control' style='max-width: 100px;' id='data_type'></td>";
            newRow += "<td><input type='text' name='desc' class='form-control' id='desc'></td>";
            newRow += "<td><a onclick='postInsert(event)' id='parm_add'><i class='glyphicon glyphicon-plus'></i></a><a onclick='deleteRow(event)' id='remove'><i class='glyphicon glyphicon-remove'></i></a></td>"
            newRow += "</tr>";
            return newRow;
        }


        function deleteRow(event) {
            var target = event.currentTarget;
            $(target).parent().parent().remove();
        }

        /**
         * Insert after the step.
         *
         * @access public
         * @return void
         */
        function postInsert(event) {
            var target = event.currentTarget;
            $(target).parent().parent().after(createRow());
        }

    </script>
    <script type="text/javascript">

        var testdataBsSuggest = $("#resp_type").bsSuggest({
            data: {
                "value": [{"type": "JSON"}, {"type": "HTML"}], "defaults": "JSON"
            }
        });
    </script>
{% endblock %}